// React 核心包
import React from 'react'
// 渲染 React 代码到页面上
import { createRoot } from 'react-dom/client'

// 创建 React 元素（虚拟 DOM）
// Vue => h / createVNode => JSX
// 标签名、{ 属性名：属性值 }、内容1、内容2
// 标签名、{ 属性名：属性值 }、[内容1、内容2]
/* const wrap = React.createElement(
  'div',
  { className: 'wrap' },
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, 'React'),
    React.createElement('li', null, 'Vue'),
    React.createElement('li', null, 'Angular')
  )
) */

const wrap = (
  <div className='wrap'>
    <ul>
      <li>vue</li>
      <li>react</li>
      <li>angular</li>
    </ul>
  </div>
)

// createRoot(渲染到哪儿).render(渲染谁)
createRoot(document.querySelector('#root')).render(wrap)
